<template>
	<view class="uni-flex main" style="align-items: center;flex-direction: column;">
		<image style="flex: 1;" class="uni-flex-item" src="../../../static/img/headlogo.jpg" mode="aspectFit"></image>
		<form @submit="bindingExists" class="uni-flex-item uni-flex" style="flex: 3;align-items: center;flex-direction: column;padding-top: 120rpx;">
			<view class="uni-form-item">
				<input class="uni-input" name="name" placeholder="请输入用户名" />
				</view>
			<view class="uni-form-item with-fun uni-flex" style="justify-content: center;">
				<input class="uni-input" name="password" placeholder="请输入密码" :password="showPassword" />
				<view class="uni-icon uni-icon-eye" style="padding-top: 3%;" :class="[!showPassword ? 'uni-active' : '']" @click="changePassword"></view>
			</view>
			<view class="uni-form-item"><button type="primary" style="width: 100%;" form-type="submit">绑定</button></view>
		</form>
	</view>
</template>

<script>
var graceChecker = require('../../../common/graceChecker.js'),
	_self;
export default {
	data() {
		return {
			showPassword: true
		};
	},
	created() {
		_self = this;
	},
	methods: {
		changePassword: function() {
			this.showPassword = !this.showPassword;
		},
		bindingExists: function(e) {
			var rule = [
				{ name: 'name', checkType: 'notnull', checkRule: '', errorMsg: '请填写用户名' },
				{ name: 'password', checkType: 'notnull', checkRule: '', errorMsg: '请填写密码' },
			];
			var formdata = e.detail.value
			var checkRes = graceChecker.check(formdata, rule);
			if (checkRes) {
				uni.showLoading({
					title: '绑定中...'
				});
				const qq = uni.getStorageSync('qq');
				uni.showModal({
					content: qq
				})
				uni.request({
					url: _self.websiteUrl + '/qq/binding/exists',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {"name": formdata.name, "password": formdata.password, "openId": qq.openId},
					success: (t) => {
						if (t.data.status === 200 && t.data.success === true) {
							uni.hideLoading();
							uni.setStorageSync("token", t.data.payload);
							uni.showToast({
								icon: 'success',
								title: '绑定成功！',
								duration: 1000
							})
							setTimeout(function() {
								uni.reLaunch({
									url: '../../person/index'
								})
							}, 1000)
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: t.data.msg
							})
						}
					},
					fail: (t) => {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '请求失败!'
						})
					}
				})
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none', image: '../../static/error.png' });
			}
		}
	}
};
</script>

<style>
page {
	height: 100%;
}

.with-fun {
	display: flex;
	flex-wrap: nowrap;
}
.with-fun .uni-icon {
	width: 40px;
	flex-shrink: 0;
	background: #ffffff;
}
.main {
	background-color: #fde23d !important;
	width: 100%;
	height: 100%;
}
</style>
